<template>
    <div class="navlist">
        <div class="title">
            <div class="title-left">项目列表 <button @click="lower">下架</button></div>
            <div class="title-right"><button @click="release">发布项目</button><button @click="deleted">删除项目</button></div>
        </div>
        <div class="inner">
            <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px">
                <Checkbox class="list-top"
                          :indeterminate="indeterminate"
                          :value="checkAll"
                          @click.prevent.native="handleCheckAll">全选
                    <span>项目信息</span>
                    <span>项目类别</span>
                    <span>发布时间</span>
                </Checkbox>
            </div>
            <CheckboxGroup v-model="checkid" @on-change="checkAllGroupChange">
                <ul>
                    <li class="out-list clearfix" v-for="(i,k) in checkAllGroup" :key="k">
                        <Checkbox :label="i.id" style="float: left">
                            <div style="display: inline-block;width: 140px;height: 114px" @click="fun(i.id)"><img  :src="$Url+i.images" alt="" style="width: 140px;height: 114px"></div>
                        </Checkbox>

                        <div style="float: left;">
                            <ul>
                                <li>
                                    <span style="display: block;width:478px;float: left">标题：{{i.name}}<span class="edit-btn"><Icon type="ios-hammer" /> 编辑</span></span>
                                    <span >{{i.group_name}}</span>
                                    <span style="margin-left: 80px">{{i.addtime}}</span>
                                </li>
                                <li>
                                    <span style="display: block;width:478px;float: left">医院:{{i.hospital}}<span class="edit-btn"><Icon type="ios-hammer" /> 编辑</span></span>
                                    <span></span>
                                </li>
                                <li>
                                        <span>价格：<a style="color: #FE5371">{{i.nowprice}}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <span>医院价格：{{i.price}}</span></span>
                                    <span style="margin: 0 20px">折扣：<select name="" id=""><option value="">{{i.sale}}</option></select></span>
                                    <span>数量：<input type="text" style="width: 40px;height: 20px" :value="i.num"></span>
                                    <span style="margin-left: 190px"><a style="display: inline-block;width: 80px;height: 30px;background-color: #ff5b79;color: #fff;text-align: center;line-height: 30px" v-on:click.stop="fun1(i.id)">重新编辑</a></span>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </CheckboxGroup>
        </div>
        <div style="text-align: center;margin: 20px 0"><Page :total="num" @on-change="pab" /></div>
    </div>
</template>

<script>
    export default {
        name: "NavList",
        data () {
            return {
                formItem: {},
                indeterminate: true,
                checkAll: false,
                checkAllGroup: [],
                checkid:[],
                id:[],
                selected:0,
                ids:'',
                num:0,
                page:1
            }
        },
        created () {
          this.getinfo()
        },
        computed: {

        },
        methods: {
            pab (page) {
                this.page = page
                this.getinfo()
            },
            fun (id) {
                this.$router.push({path: '/commoditydetails/index',query:{id:id,sauts:1}})
            },
            fun1 (id) {
                this.$router.push({path:'/my/project/productlistdelist',query:{id:id}})
            },
            lower () {
                let _this = this
                _this.ids= _this.checkid.join(',');
                _this.$post('/api/goods/xiaGoods',
                    {
                        ids:_this.ids
                    },function (res) {
                        _this.$message.success(res.msg);
                        _this.getinfo()
                    },function (err,errmsg,errcode) {
                        _this.$message.error(errmsg);

                    }
                )
            },
            release () {
                this.$router.push({path:'/my/project/list'})
            },
            deleted () {
                let _this = this
                _this.ids= _this.checkid.join(',');
                _this.$post('/api/goods/delgoods',
                    {
                        ids:_this.ids
                    },function (res) {
                        _this.$message.success(res.msg);
                        _this.getinfo()
                    },function (err,errmsg,errcode) {
                        _this.$message.error(errmsg);

                    }
                )
            },
            getinfo () {
                let _this = this
                _this.$post('/api/goods/getGoodsList',
                    {
                        token:_this.$token,
                        status:_this.selected,
                        page:_this.page,
                        num:10
                    },function (res) {
                        _this.num = parseInt(res.data.length)
                        _this.checkAllGroup = res.data
                        _this.checkAllGroup.forEach(function (i) {
                            _this.id.push(i.id)
                        })
                    },function (err,errmsg,errcode) {
                        _this.$message.error(errmsg);

                    }
                )
            },
            handleCheckAll () {
                if (this.indeterminate) {
                    console.log(this.indeterminate)
                    this.checkAll = true;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;

                if (this.checkAll) {
                    this.checkid =this.id;
                } else {
                    this.checkid = [];
                }
            },
            checkAllGroupChange (data) {
                if (this.checkid.length === this.checkAllGroup.length) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = false;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../style/style.less";
   .navlist{
       border: 1px solid @border-color;
       padding: 15px;
       .title{
           color: #ff5371;
           font-size: 18px;
           padding-bottom: 8px;
           overflow: hidden;
           border-bottom: 1px solid @theme-color-dark;
           margin-bottom: 2px;
       }
       .title-left{
           float: left;
           font-size: 18px;
       }
       .title-right{
           float: right;
       }
       .title-right button{
           margin-right: 10px;
       }
       .title button{
           width: 74px;
           height: 31px;
           background-color: #ff5371;
           border-radius: 4px;
           color: #fff;
           outline: none;
           border: none;
           font-size: 14px;
           border-bottom: 2px solid red;
       }

       .out-list{
           /*height: 115px;*/
           padding: 10px;
           border-bottom: 1px dashed #eeeeee;
       }
       .out-list ul li:first-child{
           background-color: #eeeeee;
       }
       .ivu-icon[data-v-5e279927]{
           color: #FE5371;
       }
       .out-list ul li{
           width: 760px;
           height: 30px;
           padding-left: 10px;
           line-height: 30px;
       }
       .out-list ul li:first-child{
           background-color: #F8F8F8;
       }
       .ivu-icon[data-v-061bc96f]{
           color: #FE5371;
       }
       .list-top{
           line-height: 30px;
           width: 946px;
           height: 30px;
           padding-left: 10px;
           background-color: #F5EEEF;
       }
       .list-top span{
           margin: 0 246px;
       }
       .list-top>:nth-child(3){
           margin: 0 70px;
       }
       .list-top>:nth-child(4){
           margin: 0 56px;
       }
   }
</style>